<template>
  <div class='left-box flex-acenter flex-column hide-scrollbar'>
    <div class="box-title">
      <CustomTitle title="智慧用电" :isAutoMargin="false" :isLine="true" fontSet="font1">
        <template #utils>

          <div class="selectDevice position-a">
            <el-select size="mini" v-model="deviceId" filterable placeholder="请选择设备" class="selectDevice">
              <el-option v-for="item in deviceList" :key="item.value" :value="item.value" :label="item.label">
                {{ item.label }}
              </el-option>
            </el-select>
          </div>
        </template>
      </CustomTitle>
    </div>
    <div class="box-content flex-bcenter hide-scrollbar">
      <!-- <div class="content-1">
        <el-select size="mini" v-model="selectDevice" filterable placeholder="请选择设备" class="selectDevice" @change="handleChange">
          <el-option v-for="item in 4" :key="item"></el-option>
        </el-select>
        <div class="box-item flex flex-column" v-for="(item, index) in itemGroup" :key="index">
          <div class="item-title">{{ item.title }}</div>
          <div class="item-content">{{ item.value }}</div>
        </div>
      </div> -->
      <div class="content-2">
        <ul class="flex flex-wrap flex-jcenter width-100">
          <EmptyData v-if="!powerData.length"></EmptyData>
          <template v-else>
            <li v-for="(item,key) in powerData" :key="key">
              <span class="label">{{ item.monitorTypeName + item.lineNo }}:</span>
              <span class="value">{{ item.monitorValue }}</span>
            </li>
          </template>
        </ul>
      </div>
      <!-- <div class="content-3">
        <PlaneCard title="环境温湿度">
          <template #content>
            <ul class="flex flex-wrap width-100">
              <li>
                <span class="label">工作温度</span>
                <span class="value">{{ powerData.voltage }}</span>
              </li>
              <li>
                <span class="label">工作湿度</span>
                <span class="value">{{ powerData.current }}</span>
              </li>
            </ul>
          </template>
        </PlaneCard>
      </div> -->
    </div>
  </div>
</template>
<script>
import PlaneCard from '@/components/Dashboard/PlaneCard'
import { getElectricDeviceData, getElectricDeviceDataList } from '../api'
export default {
  data () {
    return {
      itemGroup: [
        {
          title: '变压器工作温度',
          value: '53°C',
        },
        {
          title: '变压器工作温度',
          value: '53°C',
        }
      ],
      powerData: [],
      // 设备列表
      deviceList: [],
      deviceId: ''
    };
  },
  components: {
    PlaneCard
  },
  computed: {},
  watch: {
    deviceId: {
      handler () {
        this.initDeviceDetails()
      }
    }
  },
  methods: {
    async getData (deptId) {
      const params = {
        deptId
      }
      try {
        const response = await getElectricDeviceDataList(params)
        if (response) {
          console.log('res')
          const data = response.map(item => {
            return {
              value: item.deviceId,
              label: item.deviceName
            }
          })
          this.$set(this, 'deviceList', data)
          this.$set(this, 'powerData', [])
          if (data.length > 0) {
            this.deviceId = data[0].value
          } else {
            this.deviceId = ''
          }
        }
      } catch (error) {
        console.error(error)
      }

    },
    async initDeviceDetails () {
      if(!this.deviceId) {
        return
      }
      const params = {
        deviceId: this.deviceId
      }
      const response = await getElectricDeviceData(params)
      this.powerData = response
    }
  },
}
</script>

<style lang='less' scoped>
.box-title {
  width: 100%;
  height: 35px;
  .selectDevice {
    z-index: 5;
    position: relative;
    left: -3px;
    top: 10px;
  }
}
.box-content {
  flex: 1;
  width: 100%;
  height: calc(100% - 65px);
  overflow: auto;
  flex-direction: column;
  gap: 5px;
  ul > li {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
    .label {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #7aa3cc;
    }
    .value {
      font-family: Oswald, Oswald;
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
    }
  }
  .content-1 {
    width: 100%;
    display: flex;
    height: 60px;
    gap: 5px;
    .box-item {
      width: 50%;
      display: flex;
      justify-items: center;
      align-items: center;
      height: 100%;
      background: url("@/assets/images/dashboard/box4.png") no-repeat;
      background-size: cover;
      // padding: 10px 0;
      box-sizing: border-box;

      .item-title {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: 50%;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
      .item-content {
        display: flex;
        height: 50%;
        font-family: Oswald, Oswald;
        font-weight: 400;
        font-size: 20px;
        color: #30dcff;
        position: relative;
        &::after {
          position: absolute;
          content: "";
          bottom: -2px;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: #30dcff;
        }
      }
    }
  }
  .content-2 {
    width: 100%;
    overflow: auto;
    height: calc(100% - 60px);
  }
  .content-3 {
    width: 100%;
  }
}
</style>